<template>
  <el-dialog
    class="personnel-info-model"
    :title="title"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(1000)"
    :before-close="handleCancel">
    <div class="content">
      <ul class="tabs">
        <li :class="activeId === '0' ? 'active' : ''" @click="handleClick('0')">
          基本信息
        </li>
        <li :class="activeId === '1' ? 'active' : ''" @click="handleClick('1')">
          详细信息
        </li>
        <li :class="activeId === '2' ? 'active' : ''" @click="handleClick('2')">
          资格证书
        </li>
        <li v-if="type === 'edit'" :class="activeId === '3' ? 'active' : ''" @click="handleClick('3')">
          其他
        </li>
      </ul>
      <div class="form-container">
        <!-- 基本信息-->
        <el-form
          v-show="activeId === '0'"
          :model="baseForm"
          :rules="rules"
          size="medium"
          ref="baseForm"
          class="rule-form"
        >
          <el-form-item class="custom-item-left" label="姓名" prop="name" required>
            <el-input v-if="hasAdd" placeholder="请输入" v-model="baseForm.name"></el-input>
            <span v-else class="detail-text">{{ baseForm.name }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="工号" prop="version" required>
            <el-input v-if="hasAdd"  placeholder="请输入" v-model="baseForm.version"></el-input>
            <span v-else class="detail-text">{{ baseForm.version }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="性别" prop="project_status" required>
            <el-radio-group v-if="hasAdd" v-model="baseForm.project_status">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
            <span v-else class="detail-text">{{ baseForm.project_status }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="身份证号" prop="idNumber" required>
            <el-input v-if="hasAdd"  placeholder="请输入" v-model="baseForm.idNumber"></el-input>
            <span v-else class="detail-text">{{ baseForm.idNumber }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="所属机构" prop="project_type" required>
            <el-select v-if="hasAdd" placeholder="请选择机构" v-model="baseForm.project_type"></el-select>
            <span v-else class="detail-text">{{ baseForm.project_type }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="所属班组" prop="project_progres" required>
            <el-select v-if="hasAdd" placeholder="请选择班组" v-model="baseForm.project_progres"></el-select>
            <span v-else class="detail-text">{{ baseForm.project_progres }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="工种" prop="job" required>
            <el-select v-if="hasAdd" placeholder="请选择工种" v-model="baseForm.job">
              <el-option
                v-for="(item, index) in workTypeList"
                :value="item"
                :label="item"
                :key="index">
              </el-option>
            </el-select>
            <span v-else class="detail-text">{{ baseForm.job }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="岗位" prop="job" required>
            <el-select v-if="hasAdd" placeholder="请选择岗位" v-model="baseForm.role"></el-select>
            <span v-else class="detail-text">{{ baseForm.role }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="是否管理员" prop="test1" required>
            <el-radio-group v-if="hasAdd" v-model="baseForm.test1">
              <el-radio label="工人"></el-radio>
              <el-radio label="管理员"></el-radio>
            </el-radio-group>
            <span v-else class="detail-text">{{ baseForm.test1 }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="合同状态" prop="test2" required>
            <el-radio-group v-if="hasAdd" v-model="baseForm.test2">
              <el-radio label="已签合同"></el-radio>
              <el-radio label="未签合同"></el-radio>
            </el-radio-group>
            <span v-else class="detail-text">{{ baseForm.test2 }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left upload" label="头像" prop="fileList">
            <el-upload
              v-if="hasAdd"
              action="#"
              :limit="1"
              list-type="picture-card"
              :on-change="handleFileChange"
              :on-exceed="handleFileExceed"
              :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file.url)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleFileRemove(file, 'ruleForm')"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div v-else class="img-list">
              <img :src="baseForm.headPhoto" />
            </div>
          </el-form-item>
        </el-form>

        <!-- 详细信息 -->
        <el-form
          v-show="activeId === '1'"
          :model="detailForm"
          :rules="rules"
          size="medium"
          ref="detailForm"
          class="rule-form"
        >
          <el-form-item class="custom-item-left" label="民族" prop="nation" required>
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.nation"></el-input>
            <span v-else class="detail-text">{{ detailForm.nation }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="出生日期" prop="birthday" required>
            <el-date-picker
              v-if="hasAdd"
              v-model="detailForm.birthday"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            <span v-else class="detail-text">{{ detailForm.birthday }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="籍贯" prop="birthPlace">
            <el-cascader
              v-if="hasAdd"
              placeholder="请选择行政区划"
              clearable
              filterable
              popper-class="address-popper"
              :props="{
              expandTrigger: 'click',
              value: 'name',
              label: 'name',
              children: 'children'
            }"
              v-model="detailForm.divisions"
              :options="addressData"
            >
            </el-cascader>
            <span v-else class="detail-text">{{ detailForm.birthPlace }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="DN码" prop="dn">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.project_company"></el-input>
            <span v-else class="detail-text">{{ detailForm.dn }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left address" label="籍贯地址" prop="addr">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.addr"></el-input>
            <span v-else class="detail-text">{{ detailForm.addr }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="签发机关" prop="issueAgency">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.issueAgency"></el-input>
            <span v-else class="detail-text">{{ detailForm.issueAgency }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="有效期限" prop="validityEndTime">
            <el-date-picker
              v-if="hasAdd"
              v-model="detailForm.validityEndTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期时间">
            </el-date-picker>
            <span v-else class="detail-text">{{ detailForm.validityEndTime }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="政治面貌" prop="aaa">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.aaa"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="文化程度" prop="aaa">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.aaa"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="婚姻状况" prop="bbb" required>
            <el-radio-group v-if="hasAdd" v-model="detailForm.bbb">
              <el-radio label="未婚"></el-radio>
              <el-radio label="已婚"></el-radio>
            </el-radio-group>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="联系电话" prop="phone" required>
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.phone"></el-input>
            <span v-else class="detail-text">{{ detailForm.phone }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left address" label="暂住地址" prop="aaa" required>
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.aaa"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="居住证" prop="aaa" required>
            <el-radio-group v-if="hasAdd" v-model="detailForm.project_status">
              <el-radio label="未办理"></el-radio>
              <el-radio label="已办理"></el-radio>
            </el-radio-group>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="办理日期" prop="aaa">
            <el-date-picker
              v-if="hasAdd"
              v-model="detailForm.leave_date"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="银行卡号" prop="blood_pressure">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.blood_pressure"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="开户银行" prop="heartbeat">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.heartbeat"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="学位" prop="blood_pressure">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.blood_pressure"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="特长" prop="heartbeat">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.heartbeat"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="紧急联系人" prop="blood_pressure">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.blood_pressure"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="紧急电话" prop="heartbeat">
            <el-input v-if="hasAdd" placeholder="请输入" v-model="detailForm.heartbeat"></el-input>
            <span v-else class="detail-text">{{ detailForm.aaa }}</span>
          </el-form-item>
          <el-form-item class="custom-item-left upload" label="身份证" prop="leave_date">
            <el-upload
              v-if="hasAdd"
              action="#"
              :limit="2"
              :file-list="detailForm.fileList"
              list-type="picture-card"
              :on-change="handleFileChange"
              :on-exceed="handleFileExceed"
              :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file.url)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleFileRemove(file, 'ruleForm')"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <div v-else class="img-list">
              <img
                v-if="detailForm.idCardPhotoFacede"
                class="img-item"
                :src="detailForm.idCardPhotoFacede" />
              <img
                v-if="detailForm.idCardPhotoback"
                class="img-item"
                :src="detailForm.idCardPhotoback" />
            </div>
          </el-form-item>
        </el-form>

        <!-- 资格证书 -->
        <div class="qualifications-table" v-show="activeId === '2'">
          <div class="btn">
            <el-button size="small" type="primary" @click="handleAdd">新增证书</el-button>
          </div>
          <el-table :data="tableData" row-key="uuid" class="table-container">
            <el-table-column label="证书名称" prop="certificate_name"></el-table-column>
            <el-table-column label="证书编号" prop="certificate_id"></el-table-column>
            <el-table-column label="技能等级" prop="skill_level"></el-table-column>
            <el-table-column label="发证日期">
              <template slot-scope="scope">
                <span class="detail-info">
                  {{ $moment(scope.row.issue_date).format('yyyy-MM-DD HH:mm:ss') }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="有效期至">
              <template slot-scope="scope">
                <span class="detail-info">
                  {{ $moment(scope.row.validity_period).format('yyyy-MM-DD HH:mm:ss') }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="发证机关" prop="certificate_authority"></el-table-column>
<!--            <el-table-column label="附件">-->
<!--              <template slot-scope="scope">-->
<!--                <div class="detail-info">-->
<!--                  附件1-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <i class="iconfont iconchakan" @click="handleEdit(scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="total > 10"
            :page-size="pageSize"
            :current-page="pageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 其他 -->
        <el-form
          v-if="type === 'edit'"
          v-show="activeId === '3'"
          :model="ruleForm"
          :rules="rules"
          size="medium"
          ref="ruleForm"
          class="rule-form"
        >
          <el-form-item class="custom-item-left location" label="位置" prop="point" required>
<!--            <add-location v-model="ruleForm.point"></add-location>-->
            <span class="detail-text"></span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="宿舍" prop="dormitory" required>
<!--            <el-input placeholder="请输入" v-model="ruleForm.dormitory"></el-input>-->
            <span class="detail-text"></span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="血压" prop="blood_pressure">
<!--            <el-input placeholder="请输入" v-model="ruleForm.blood_pressure"></el-input>-->
            <span class="detail-text"></span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="心跳" prop="heartbeat" required>
<!--            <el-input placeholder="请输入" v-model="ruleForm.heartbeat"></el-input>-->
            <span class="detail-text"></span>
          </el-form-item>
          <el-form-item class="custom-item-left" label="状态" prop="status">
<!--            <el-select placeholder="请选择项目进度" v-model="ruleForm.status">-->
<!--              <el-option label="在场" value="在场"></el-option>-->
<!--              <el-option label="离场" value="离场"></el-option>-->
<!--            </el-select>-->
            <span class="detail-text"></span>
          </el-form-item>
          <el-form-item class="custom-item-right" label="离场时间" prop="leave_date">
<!--            <el-date-picker-->
<!--              v-model="ruleForm.leave_date"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间">-->
<!--            </el-date-picker>-->
            <span class="detail-text"></span>
          </el-form-item>
        </el-form>
      </div>
      <!-- 图片预览弹框 -->
      <el-dialog :visible.sync="imgVisible" :append-to-body="true">
        <div class="img-content" style="background: #fff">
          <img width="100%" :src="dialogImageUrl" alt="">
        </div>
      </el-dialog>
      <!-- 资格证书 -->
      <qualifications-model
        :visible="qualificationsVisible"
        :btnLoading="btnLoading"
        :type="qualificationsType"
        :formData="qualificationsData"
        @submit="handleSubmit"
        @cancel="qualificationsVisible = false">
      </qualifications-model>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="hanldeSave">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addressData } from '@/utils/address';
import addLocation from '@/components/corp/addLocation';
import qualificationsModel from '@/components/project/personnel/qualificationsModel';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 表单编辑回填数据
    formData: {
      type: Object,
      default: () => ({})
    },
    // 新增、编辑
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      // 地址区划数据
      addressData,
      activeId: '0',
      // 基本信息
      baseForm: {
        name: '',
        version: '',
        project_company: '',
        project_status: '',
        idNumber: '',
        project_type: '',
        project_progres: '',
        building_structure: '',
        job: '',
        role: '',
        headPhoto: ''
      },
      // 详细信息
      detailForm: {
        nation: '',
        birthday: '',
        birthPlace: '',
        issueAgency: '',
        addr: '',
        validityEndTime: '',
        idCardPhotoFacede: '',
        idCardPhotoback: '',
        fileList: []
      },
      // 资格证书列表数据
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      // 其他
      ruleForm: {
        // 位置
        point: {
          lng: '',
          lat: '',
          altitude: '',
        },
        // 宿舍
        dormitory: '',
        // 血压
        blood_pressure: '',
        // 心跳
        heartbeat: '',
        // 状态
        status: '',
        // 离场时间
        leave_date: ''
      },
      // 工种类型
      workTypeList: [],
      // 图片展示
      imgVisible: false,
      // 弹框图片展示
      dialogImageUrl: '',
      rules: {},
      loading: false,
      // 资格证书
      qualificationsVisible: false,
      // 资格弹框类型
      qualificationsType: 'add',
      qualificationsData: {},
      btnLoading: false
    };
  },
  computed: {
    // 设置弹框标题
    title() {
      return `${this.type === 'add' ? '新增' : '编辑'}人员`;
    },
    // 是否为新增
    hasAdd() {
      return this.type === 'add';
    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler(data) {
        if (data) {
          Object.keys(this.baseForm).forEach(key => {
            if (data[key]) this.baseForm[key] = data[key];
          });
          Object.keys(this.detailForm).forEach(key => {
            if (data[key]) this.detailForm[key] = data[key];
          });
        }
      }
    },
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.activeId = '0';
      this.clear(this.baseForm);
      this.clear(this.detailForm);
    }
  },
  components: {
    addLocation,
    qualificationsModel
  },
  methods: {
    /**
     * 获取证书列表数据
     */
    async getTableData() {
      if (!this.baseForm.idNumber) return;
      const fm = new FormData();
      fm.append('page', String(this.pageNo));
      fm.append('limit', String(this.pageSize));
      fm.append('id_number', this.baseForm.idNumber);
      const { success, data } = await this.$Model.getCertificate(fm);
      if (success && Array.isArray(data.data)) {
        this.total = data.count ? data.count - 0 : 0;
        this.tableData = data.data;
      }
    },
    /**
     * 获取证书附件
     */
    async getFile(data) {
      const fm = new FormData();
      fm.append('certificate_uuid', data.uuid);
      fm.append('page', '1');
      fm.append('limit', '50');
      return await this.$Model.getCertificateFile(fm);
    },
    /**
     * 切换tab
     * @param id {String}
     */
    handleClick(id) {
      this.activeId = id;
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    handleFileChange(file, fileList) {
      this.detailForm.fileList = [...fileList];
    },
    handleFileExceed(file, fileList) {
    },
    /**
     * 删除图片
     * @param file {File} 图片文件信息
     * @param type {String} 删除类型
     */
    handleFileRemove(file, type) {
      console.log(file, type);
      const { uid } = file;
      this.detailForm.fileList = this.detailForm.fileList.filter(item => {
        return uid !== item.uid;
      });
    },
    /**
     * 查看图片
     * @param url {String} 图片路径
     */
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.imgVisible = true;
    },
    /**
     * 新增证书
     */
    handleAdd() {
      this.qualificationsType = 'add';
      this.qualificationsData = {};
      this.qualificationsVisible = true;
    },
    /**
     * 编辑证书信息
     * @param row {Object} 当前行证书信息
     */
    async handleEdit(row) {
      this.qualificationsData = {
        ...row,
        id_number: this.baseForm.idNumber
      };
      this.qualificationsType = 'edit';
      this.qualificationsVisible = true;
      const { success, data } = await this.getFile(row);
      if (success && data.data) this.qualificationsData = {
        ...this.qualificationsData,
        fileList: data.data
      };
    },
    /**
     * 提交资格证书
     * @param data {Object | Boolean}
     */
    async handleSubmit(data) {
      if (!data) return;
      if (!this.baseForm.idNumber) {
        this.$message.warning('身份证不能为空');
        return;
      }
      const hasAdd = this.qualificationsType === 'add';
      const fm = new FormData();
      hasAdd && fm.append('id_number', this.baseForm.idNumber);
      Object.keys(data).forEach(key => {
        if (key === 'fileList') {
          // 新增接口上传附件
          hasAdd && data.fileList.forEach(item => {
            fm.append('certificate_file', item);
          });
          return;
        }
        fm.append(key, data[key]);
      });
      if (!hasAdd) { // 编辑证书
        fm.append('certificate_uuid', this.qualificationsData.uuid);
        // 删除的附件信息
        const removeFile = this.qualificationsData.fileList.filter(item => {
          const hasFind = data.fileList.findIndex(val => {
            return val.url === item.url;
          });
          return hasFind === -1;
        });
        // 新增的附件信息
        const addFile = data.fileList.filter(item => !item.url);
        if (removeFile.length) {
          const rmFm = new FormData();
          removeFile.forEach(v => rmFm.append('file_uuid', v.uuid));
          this.$Model.deleteCertificateFile(rmFm);
        }
        if (addFile.length) {
          const addFm = new FormData();
          // 需要上传附件的证书唯一号，即证书的uuid
          addFm.append('certificate_uuid', this.qualificationsData.uuid);
          addFile.forEach(f => addFm.append('certificate_file', f));
          this.$Model.uploadCertificateFile(addFm);
        }
      }
      this.btnLoading = true;
      const { success } = hasAdd
        ? await this.$Model.addCertificate(fm)
        : await this.$Model.updateCertificate(fm);
      this.btnLoading = false;
      if (success) {
        this.getTableData();
        this.$message.success('保存成功');
        this.qualificationsVisible = false;
      }
    },
    /**
     * 保存
     */
    hanldeSave() {
      this.handleCancel();
    },
    /**
     * 清除回填数据
     * @param data {Object}
     */
    clear(data) {
      if (typeof data !== 'object') return {};
      Object.keys(data).forEach(key => {
        const type = this.$checkType(data[key]);
        switch (type) {
          case 'array':
            data[key] = [];
            return;
          case 'object':
            data[key] = {};
            return;
          default:
            data[key] = '';
            return;
        }
      });
    },
    // 取消、关闭
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .personnel-info-model {
    .content {
      width: 100%;
      min-height: 500px;
      .tabs {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-image: linear-gradient(to right, transparent 0%, #4f5073 35%, #6d719d 50%, #4f5073 65%, transparent 100%) 1 1;
        li {
          width: 100px;
          height: 100%;
          color: $mainColor;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          border-radius: 5px;
          transition: all .2s;
          &.active {
            color: #fff;
            background: $lightBtnBg;
          }
        }
      }
      .form-container {
        width: 100%;
        .btn {
          width: 100%;
          height: 40px;
          text-align: right;
        }
        /deep/ .el-form {
          display: flex;
          flex-wrap: wrap;
          > div[class*="custom-item"] {
            width: 50%;
            float: left;
            display: flex;
            .el-form-item__label {
              color: #fff;
            }
            .el-form-item__content {
              width: 360px;
              .el-select, .el-cascader, .el-date-editor {
                width: 100%;
              }
              input {
                background-color: #0e0e2d;
                border: none;
                color: #fff;
              }
              .detail-text {
                width: 100%;
                height: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: $mainColor;
              }
              .img-list {
                width: 100%;
                height: 100%;
                display: flex;
                img {
                  display: inline-block;
                  width: 100px;
                  height: 120px;
                  margin: 10px 20px 0 0;
                  &.img-item {
                    width: 260px;
                    height: 140px;
                  }
                }
              }
            }
            .el-radio {
              color: $mainColor;
              &.is-checked {
                .el-radio__label {
                  color: #fff;
                }
              }
            }
            &.custom-item-left {
              .el-form-item__label {
                width: 120px;
              }
            }
            &.custom-item-right {
              .el-form-item__label {
                width: 200px;
              }
            }
            &.cost {
              .el-form-item__content {
                color: $mainColor;
                .el-input {
                  width: 320px;
                  margin-right: 5px;
                }
              }
            }
            &.abbreviation {
              .el-form-item__content {
                color: $mainColor;
                .el-input {
                  width: 305px;
                  margin-right: 5px;
                }
              }
            }
            &.period {
              width: 100%;
              .el-form-item__label {
                width: 120px;
              }
              .el-form-item__content {
                width: 600px;
                .el-date-editor {
                  width: 100%;
                  background-color: #0e0e2d;
                  border: none;
                  .el-range-separator {
                    color: $mainColor;
                  }
                }
              }
            }
            &.address {
              width: 100%;
              .el-form-item__label {
                width: 120px;
              }
              .el-form-item__content {
                width: calc(100% - 140px);
              }
            }
            &.survey {
              width: 100%;
              .el-form-item__content {
                width: calc(100% - 140px);
                textarea {
                  background-color: #0e0e2d;
                  color: #fff;
                  border: none;
                }
              }
            }
            &.upload {
              width: 100%;
              /deep/ .el-form-item__content {
                width: calc(100% - 140px);
              }
              /deep/ .el-upload-list {
                float: left;
                li {
                  width: 100px;
                  height: 68px;
                }
              }
              /deep/ .el-upload--picture-card {
               width: 68px;
               height: 68px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
        /deep/ .el-form-item {
          margin-bottom: 15px;
        }
      }
    }
    /deep/ .el-dialog__header {
      border: none;
    }
    .dialog-footer {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-dialog__body {
      padding-top: 5px;
    }
  }
</style>
